<template>
    <div>
        <div class="all-page">
            <span class="title">精准病例分析</span>
            <span class="page-introduction">利用AI技术深度剖析病情，
                提供个性化治疗方案</span>
            <div class="upload-pic">
                <el-upload :show-file-list="false" :auto-upload="true"
                    action="http://localhost:8088/file/uploadForSheet" name="file"
                    :on-success="res => uploadSuccess(res.data)">
                    <img v-if="imgUrl" :src="imgUrl" width="100%" />
                    <img v-else src="../assets/images/uploadAnalysis.png" width="100%" />
                </el-upload>
                <div class="photo-box">
                    <video ref="videoElement" class="photo-box"></video>
                    <canvas ref="canvasElement" class="photo-box"></canvas>
                </div>
            </div>
            <button class="button-open-camera" @click="openCamera()">
                <span class="open-camera-text">开启摄像头</span>
            </button>
            <button class="button-shut" @click="shut()">
                <span class="shut-text">拍摄</span>
            </button>
            <div class="main-box">
                <span class="box-title">重点问题：</span>
                <span class="box-text">{{ main }}</span>
            </div>
            <div class="advise-box">
                <span class="box-title">健康建议：</span>
                <span class="box-text-small">{{ advise }}
                </span>
            </div>
            <div class="problem-box">
                <span class="box-title">异常情况：</span>
                <span class="box-text-small">{{ problem }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from '../utils/request'

//三个显示框里的数据
let main = ref("- 白细胞数目偏高\
                    - 中性粒细胞百分比偏高\
                    - 平均红细胞体积偏低\
                    - 血小板分布宽度偏高\
                    - 红细胞压积偏低")
let problem = ref("- 白细胞数目(WBC): 16.46x10^9/L, 高于参考范围5.00~12.00x10^9/L\
                    - 中性粒细胞百分比(Neu%): 74.60%, 高于参考范围50.0~70.0%\
                    - 平均红细胞体积(MCV): 73.90fL, 低于参考范围80.0~100.0fL\
                    - 血小板分布宽度(PDW): 17.50, 高于参考范围9.0~17.0\
                    - 红细胞压积(HCT): 35.00%, 低于参考范围35.0~49.0%")
let advise = ref("- 白细胞及中性粒细胞偏高可能表示体内存在感染或炎症，建议结合临床症状进一步诊断并治疗。\
                    - 平均红细胞体积偏低可能提示贫血或铁缺乏，建议检查铁代谢指标并适当补充铁质。\
                    - 血小板分布宽度偏高虽单独看意义不大，但应结合其他指标观察血小板功能，如有需要可复查。\
                    - 红细胞压积偏低与MCV偏低相关联，可能同样指向贫血，需综合评估并调整饮食或治疗。\
                    - 请遵循医生指导，定期复查相关指标，确保健康状况。")

//上传图片的容器
let imgUrl = ref()
let desc = ref()

//拍摄照片的容器
let photoDataUrl = ref()
let stream = ref()
let videoElement = ref()
let canvasElement = ref()

onMounted(() => {
    //通过 ref 获取到的 video 元素赋值给组件实例的 videoElement 属性
    //videoElement.value = document.querySelector('#video')
    //通过 ref 获取到的 canvas 元素赋值给组件实例的 canvasElement 属性
    //canvasElement.value = document.querySelector('#canvas')
})

function openCamera() {
    console.log('进入摄像头')
    /*
      调用了 navigator.mediaDevices.getUserMedia 方法
      该方法请求用户授权访问本地设备（例如摄像头、麦克风等） 并返回一个 Promise 对象。
      调用该方法时，代码传入一个配置对象，指定要访问的设备类型
      例如 { video: true } 表示要获取视频流。调用 then 方法来处理成功的情况
      */
    if (videoElement.value && canvasElement.value) {
        console.log('Video and Canvas elements are successfully assigned.');

        // 示例: 访问 video 元素并开始播放视频
        navigator.mediaDevices.getUserMedia({ video: true })
            .then((stream) => {
                stream.value = stream
                videoElement.value.srcObject = stream.value;
                this.videoElement.play();
            })
            .catch(error => {
                console.error('打开摄像头失败:', error);
            });

        // 示例: 获取 Canvas 的 2D 上下文
        const ctx = canvasElement.value.getContext('2d');
        if (ctx) {
            // 进行一些 canvas 操作
        }
    } else {
        console.error('无法找到 video 或 canvas 元素');
    };
}

function shut() {
    console.log('拍照');
    // 获取 Canvas 元素的上下文对象
    const context = canvasElement.value.getContext('2d');

    // 将视频元素中当前帧的图像绘制到 Canvas 中
    context.drawImage(videoElement.value, 0, 0, canvasElement.value.width, canvasElement.value.height);

    // 将 Canvas 中的图像转换为 Blob 对象
    canvasElement.value.toBlob((blob) => {
        // 创建一个 File 对象
        const file = new File([blob], 'photo.jpg', { type: 'image/jpeg' });

        // 调用 getTracks() 方法遍历摄像头视频流的所有轨道，并逐一停止它们，这样就关闭了摄像头
        if (stream.value) {
            stream.value.getTracks().forEach((track) => {
                track.stop();
            })
        }
        stream.value = null;

        // 发送文件给后台
        uploadPhoto(file);
    }, 'image/jpeg');
}
function uploadPhoto(file) {
    // 创建一个 FormData 对象，并将文件添加到其中
    const formData = new FormData();
    formData.append('file', file);
    // 使用 axios 或其他 HTTP 库发送 FormData 对象到后台
    request.post('file/uploadForSheet', formData)
        .then((res) => {
            console.log('照片上传成功');
            imgUrl.value = res.data.url
            main.value = res.data.desc[0];
            problem.value = res.data.desc[1].replace(/\n/g, '<br>');
            advise.value = res.data.desc[2].replace(/\n/g, '<br>');
        })
        .catch((error) => {
            console.error('照片上传失败：', error);
        });
}

function uploadSuccess(data) {
    imgUrl.value = data.url
    main.value = data.desc[0];
    problem.value = data.desc[1].replace(/\n/g, '<br>');
    advise.value = data.desc[2].replace(/\n/g, '<br>');

}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

body {
    font-size: 14px;
}

.all-page {
    width: 100vw;
    height: 95vh;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    position: absolute;
    left: 0px;
    overflow: hidden;
}

.title {
    width: 264px;
    color: rgba(50, 73, 94, 1);
    position: absolute;
    top: 43px;
    left: 3vw;
    font-family: Inter;
    font-weight: Extra Bold;
    font-size: 44px;
    opacity: 1;
    text-align: left;
}

.page-introduction {
    width: 264px;
    color: rgba(50, 73, 94, 1);
    position: absolute;
    top: 15vh;
    left: 3vw;
    font-family: Inter;
    font-weight: Medium;
    font-size: 22px;
    opacity: 1;
    text-align: left;
}

.upload-pic {
    width: 30vw;
    height: 40vh;
    /* background: url("../assets/images/uploadAnalysis.png") no-repeat center center; */
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 5vh;
    left: 35vw;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.button-open-camera {
    width: 13vw;
    height: 8vh;
    background: rgba(72, 100, 125, 1);
    border: none;
    opacity: 1;
    position: absolute;
    top: 8vh;
    right: 16vw;
    border-radius: 50px;
    overflow: hidden;
}

.button-shut {
    width: 13vw;
    height: 8vh;
    background: rgba(233, 82, 88, 1);
    border: none;
    opacity: 1;
    position: absolute;
    top: 22vh;
    right: 16vw;
    border-radius: 50px;
    overflow: hidden;
}

.shut-text {
    color: rgba(255, 255, 255, 1);
    position: absolute;
    font-family: Inter;
    font-weight: Regular;
    font-size: 24px;
    position: absolute;
    top: 1.5vh;
    right: 5vw;
    opacity: 1;
    text-align: left;
}

.open-camera-text {
    color: rgba(255, 255, 255, 1);
    position: absolute;
    font-family: Inter;
    font-weight: Regular;
    font-size: 24px;
    position: absolute;
    top: 1.5vh;
    right: 2.5vw;
    opacity: 1;
    text-align: left;
}

.main-box {
    width: 30vw;
    height: 40vh;
    background: rgba(72, 100, 125, 1);
    opacity: 1;
    position: absolute;
    top: 50vh;
    left: 35vw;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.advise-box {
    width: 30vw;
    height: 40vh;
    background: rgba(72, 100, 125, 1);
    opacity: 1;
    position: absolute;
    top: 50vh;
    right: 3vw;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.problem-box {
    width: 30vw;
    height: 40vh;
    background: rgba(72, 100, 125, 1);
    opacity: 1;
    position: absolute;
    top: 50vh;
    left: 3vw;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.box-title {
    width: 120px;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 2vh;
    left: 2vw;
    font-family: Inter;
    font-weight: Regular;
    font-size: 24px;
    opacity: 1;
    text-align: left;
}

.box-text {
    width: 30vw;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 6vh;
    left: 2vw;
    font-family: Inter;
    font-weight: lighter;
    font-size: 22px;
    opacity: 1;
    text-align: left;
}

.box-text-small {
    width: 30vw;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 6vh;
    left: 2vw;
    right: 2vw;
    font-family: Inter;
    font-weight: lighter;
    font-size: 18px;
    opacity: 1;
    text-align: left;
}

.photo-box {
    width: 30vw;
    height: 40vh;
    position: absolute;
    top: 0vh;
    left: 0vw;
    pointer-events: none;
}
</style>